<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <style>
            .btn{
               width: 200px;
               height:30px;
               text-align: center;
               line-height: 30px;
               margin-top: 20px;
               border-radius: 15px;
                color: #fff;
                  background-color: #ccc;
           }
           .btn_enable{
               background-color: #FF0000;
           }
        </style>
    </head>
    <body>
        <div id="container">
            用户注册<br>
            <input type="checkbox" v-model="isAgree" />同意协议
           <div    class="btn" :class="[{btn_enable:isAgree}]">注册</div>
        </div>
        
        <script>
           var app=new Vue({
               el:"#container",
               data:{
                   isAgree:false,
                    btn:"btn_enable"
               }
           });
        </script>
    </body>
</html>
